<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import {uploadAPI} from "@/apis/test.ts";
import {useDataPublicStore} from "@/stores/dataPublicStore.ts";
const dataPublicStore=useDataPublicStore();


/********************************以下是文件上传模块代码********************************/
// 定义上传文件列表，ref方式
const fileList = ref<UploadUserFile[]>([]);
// 这个函数是控制文件上传数量,与组件中的:limit值匹配,超过数额，将报错，不把文件加入列表
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
      `总共可以上传5个文件, 你这次选择了 ${files.length} 个文件, 累计添加了 ${
          files.length + uploadFiles.length
      } 个文件，不符合要求！`
  );
}

// 文件上传模块的typeScript代码，
// 清空文件列表
const filesRemove=()=>{
  fileList.value=[];
}
const summitUpload= async ()=>{
  const formData=new FormData();
  fileList.value.forEach((item)=>{
    formData.append('files',item.raw);
  })
  await uploadAPI(formData);
  dataPublicStore.setOnUploadProgress(0);
}


// 用于判断文件大小是否合法，限制重复上传的作用及文件类型
const handleChange: UploadProps['onChange'] = (file,fileList) => {
  //1、判断文件大小是否合法，文件限制不能大于100M
  const isLt100M = (file.size) / 1024 / 1024 < 100;
  if (!isLt100M) {
    ElMessage({
      type: 'error',
      message: '上传文件大小不能超过 100MB!',
    })
    fileList.splice(-1,1) //移除当前超出大小的文件
    return false;
  }
  // 2、限制重复上传
  // 将fileList去重后的长度如果小于目前数组的长度，说明有重复
  const newListLength = new Set(fileList.map(item=>item.name)).size;
  const listLength = fileList.length;
  if(listLength > newListLength) {
    ElMessage({
      type: 'error',
      message: '上传文件重复!',
    })
    fileList.splice(-1, 1) //移除当前重复的文件即末尾对象
    return false;
  }

//   限制文件类型
  let fileName = file.name;
  let uid = file.uid
  let pos = fileName.lastIndexOf(".");
  let lastName = fileName.substring(pos, fileName.length);
  if (
      lastName.toLowerCase() !== ".jpg" &&
      lastName.toLowerCase() !== ".jpeg"&&
      lastName.toLowerCase() !== ".png"&&
      lastName.toLowerCase() !== ".gif"&&
      lastName.toLowerCase() !== ".bmp"&&
      lastName.toLowerCase() !== ".pdf"&&
      // exe和jar仅仅是测试用
      lastName.toLowerCase() !== ".exe"&&
      lastName.toLowerCase() !== ".jar"

  ) {
    // this.$message.error("文件必须为.rar .zip .doc .docx .pdf 类型");
    ElMessage({
      type: 'error',
      message: '文件必须为.jpg .jpeg .png .gif .pdf .bmp 类型!',
    })
    // this.resetCompressData()
    for(let i = 0;i<fileList.length;i++) {
      if(fileList[i].uid == uid) {
        fileList.splice(i,1)
      }
    }
    return;
  }
}
/********************************以上是文件上传模块代码********************************/

//文件上传进度条显示模块
const format=(percentage:number)=>{
  return percentage===100?'100%':`${percentage}`
}
</script>

<template>


  <!--  上传进度条显示-->
  <el-progress :percentage="dataPublicStore.onUploadProgress" :format="format" :stroke-width="2"
               v-show="dataPublicStore.onUploadProgress" style="margin: 0;padding: 0" ></el-progress>
  <!--  下载进度条显示-->
  <el-progress :percentage="dataPublicStore.onDownloadProgress" :format="format" :stroke-width="5"
               v-show="dataPublicStore.onDownloadProgress" style="margin: 0;padding: 0" ></el-progress>

  <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      v-model:file-list="fileList"
      :auto-upload="false"
      :multiple="true"
      :limit="5"
      :drag="false"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      accept=".jpeg,.gif,.jpg,.png,.bmp,.pdf"
  >

    <el-button type="primary">请选择需要上传的问题件</el-button>
    <template #tip>
      <div class="el-upload__tip">
        支持格式：.jpeg .jpg .png .bmp .gif .pdf ，单个文件不能超过100MB
      </div>
      <br><br>
      <el-button @click="filesRemove">清空文件列表</el-button>
    </template>
  </el-upload>




  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <el-button @click="summitUpload" size="large" type="primary" >点击</el-button>

</template>

<style scoped lang="scss">

.upload-demo {
  width: 300px;
  height: 60px;
  margin: 0px;
  padding: 0px;
}

</style>